<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>
<!-- 引入组件库 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<body>
    <div class="login-container" id="app">
        <el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left" label-width="0px"
            class="demo-ruleForm login-page">
            <h3 class="title">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码">
                </el-input>
            </el-form-item>
            <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>



    <style scoped>
        .login-container {
            width: 100%;
            height: 100%;
        }

        .login-page {
            -webkit-border-radius: 5px;
            border-radius: 5px;
            margin: 180px auto;
            width: 350px;
            padding: 35px 35px 15px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }

        label.el-checkbox.rememberme {
            margin: 0px 0px 15px;
            text-align: left;
        }
    </style>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script>
        new Vue({
            el: '#app',

            data: {

                logining: false,
                ruleForm2: {
                    username: [],
                    password: [],
                },
                rules2: {
                    username: [{ required: true, message: 'please enter your account', trigger: 'blur' }],
                    password: [{ required: true, message: 'enter your password', trigger: 'blur' }]
                },
                checked: false

            },
            methods: {
                handleSubmit(event) {
                    this.$refs.ruleForm2.validate((valid) => {
                        if (valid) {

                            axios.post("/login/check.do", this.ruleForm2).then((res) => {
                                console.log(res);
                                if (res.data == true) {
                                    window.location.href = "main.html";
                                }else{
                                    this.logining = false;
                                    this.$alert('username or password wrong!','info',{confirmButtonText: 'ok'})
                                }
                                // if (this.ruleForm2.username === 'admin' &&
                                //     this.ruleForm2.password === '123456') {
                                //     this.logining = false;
                                //     sessionStorage.setItem('user', this.ruleForm2.username);
                                //     this.$router.push({ path: '/' });
                                // } else {
                                //     this.logining = false;
                                //     this.$alert('username or password wrong!', 'info', {
                                //         confirmButtonText: 'ok'
                                //     }
                                // }
                            })
                            this.logining = true;

                        } else {
                            console.log('error submit!');
                            return false;
                        }
                    })
                }
            }
        });
    </script>
</body>

</html>